<script lang="ts" setup>
import { ref } from "vue"

const dataList = ref<any[]>([
  {
    title: '订单量过少',
    handle: "老师们，多用引导家长做团长，结合家长身边朋",
    createdAt: '2021-01-01 00:00:00',
  },
  {
    title: '订单量过少',
    handle: "老师们，多用引导家长做团长，结合家长身边朋",
    createdAt: '2021-01-01 00:00:00',
  },
  {
    title: '订单量过少',
    handle: "老师们，多用引导家长做团长，结合家长身边朋",
    createdAt: '2021-01-01 00:00:00',
  },
  {
    title: '订单量过少',
    handle: "老师们，多用引导家长做团长，结合家长身边朋",
    createdAt: '2021-01-01 00:00:00',
  },
  {
    title: '订单量过少',
    handle: "老师们，多用引导家长做团长，结合家长身边朋",
    createdAt: '2021-01-01 00:00:00',
  },
  {
    title: '订单量过少',
    handle: "老师们，多用引导家长做团长，结合家长身边朋",
    createdAt: '2021-01-01 00:00:00',
  },
])

const modalVisible = ref(false)
const formAction = ref('')

const handleAction = (action: string) => {
  if (action === 'add') {
    modalVisible.value = true
    formAction.value = 'add'
  }
};
</script>

<template>
  <umrp-container :gap="16" padding="16px" bg-color="#f2f2f2" height="100%">
    <umrp-breadcrumb :items="['活动管理', '活动列表', '数据预警']"></umrp-breadcrumb>
    <umrp-card>
      <umrp-grid :cols="5">
        <umrp-grid-item>
          <umrp-space :size="32" align="center">
            <div class="round">浏览量</div>
            <umrp-radio-group default-value="1">
              <umrp-radio value="1" name="status">默认</umrp-radio>
              <umrp-radio value="2" name="status">注意</umrp-radio>
              <umrp-radio value="2" name="status">警告</umrp-radio>
              <umrp-radio value="3" name="status">危险</umrp-radio>
            </umrp-radio-group>
          </umrp-space>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-space :size="32" align="center">
            <div class="round">报名量</div>
            <umrp-radio-group default-value="1">
              <umrp-radio value="1" name="status">默认</umrp-radio>
              <umrp-radio value="2" name="status">注意</umrp-radio>
              <umrp-radio value="2" name="status">警告</umrp-radio>
              <umrp-radio value="3" name="status">危险</umrp-radio>
            </umrp-radio-group>
          </umrp-space>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-space :size="32" align="center">
            <div class="round">团数量</div>
            <umrp-radio-group default-value="1">
              <umrp-radio value="1" name="status">默认</umrp-radio>
              <umrp-radio value="2" name="status">注意</umrp-radio>
              <umrp-radio value="2" name="status">警告</umrp-radio>
              <umrp-radio value="3" name="status">危险</umrp-radio>
            </umrp-radio-group>
          </umrp-space>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-space :size="32" align="center">
            <div class="round">分享量</div>
            <umrp-radio-group default-value="1">
              <umrp-radio value="1" name="status">默认</umrp-radio>
              <umrp-radio value="2" name="status">注意</umrp-radio>
              <umrp-radio value="2" name="status">警告</umrp-radio>
              <umrp-radio value="3" name="status">危险</umrp-radio>
            </umrp-radio-group>
          </umrp-space>
        </umrp-grid-item>
        <umrp-grid-item>
          <umrp-space :size="32" align="center">
            <div class="round">未付量</div>
            <umrp-radio-group default-value="1">
              <umrp-radio value="1" name="status">默认</umrp-radio>
              <umrp-radio value="2" name="status">注意</umrp-radio>
              <umrp-radio value="2" name="status">警告</umrp-radio>
              <umrp-radio value="3" name="status">危险</umrp-radio>
            </umrp-radio-group>
          </umrp-space>
        </umrp-grid-item>
      </umrp-grid>
    </umrp-card>
    <umrp-card :border="false">
      <umrp-table :action-bar="true" :data="dataList" :pagination="false" @action="handleAction">
        <template #columns>
          <umrp-table-column title="序号" data-index="id"></umrp-table-column>
          <umrp-table-column title="数据预警" data-index="title"></umrp-table-column>
          <umrp-table-column title="操作步骤" data-index="handle"></umrp-table-column>
          <umrp-table-column title="状态" slot-name="status"></umrp-table-column>
          <umrp-table-column title="发送时间" data-index="createdAt" :width="180"></umrp-table-column>
          <umrp-table-column title="操作" slot-name="action" :width="120"></umrp-table-column>
        </template>
        <template #status="{ rowIndex }">
          <u-tag color="red" v-if="rowIndex <= 2">显示</u-tag>
        </template>
        <template #action>
          <umrp-space :size="10">
            <umrp-button type="primary" @click="modalVisible = true; formAction = 'edit'">编辑</umrp-button>
            <umrp-popconfirm message="您确认删除么？">
              <umrp-button type="danger">删除</umrp-button>
            </umrp-popconfirm>
          </umrp-space>
        </template>
        <template #wxinfo="{ record }">
          <umrp-user-info :phone="false" :nick-name="record.wxinfo" :code="record.code"></umrp-user-info>
        </template>
      </umrp-table>
    </umrp-card>
    <umrp-modal :width="500" v-model:visible="modalVisible">
      <umrp-form>
        <umrp-form-item label="数据预警" :required="true">
          <umrp-input placeholder="请输入预警的标题内容"></umrp-input>
        </umrp-form-item>
        <umrp-form-item label="操作步骤" :required="true">
          <umrp-input placeholder="请输入建议执行的操作步骤"></umrp-input>
        </umrp-form-item>
      </umrp-form>
    </umrp-modal>
  </umrp-container>
</template>

<style>
.round {
  height: 100px;
  width: 100px;
  border: 1px solid #ccc;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>